<!-- 发布 -->
<template>
	<view>
		<view class="itemone">
			<u-form class="itemwidth" :model="form" ref="uForm"
				:label-style="{'font-size':'24rpx','color':'rgba(56, 56, 56, 1)','height':'40rpx'}">
				<u-form-item label="商品名" label-width='100' class="uform" prop="varieties">
					<u-input placeholder="请输入商品名" v-model="form.varieties" type="string" height="30"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<u-form-item label="种类" class="uform" label-width='100' prop="type">
					<u-input placeholder="请输入种类" v-model="form.type" type="string" height="30"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<u-form-item label="重量(kg)" class="uform" label-width='150' prop="kilogram">
					<u-input placeholder="请输入重量" v-model="form.kilogram" type="number" height="30"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<u-form-item label="单价(元/kg)" class="uform" label-width='180' prop="price">
					<u-input placeholder="请输入单价" v-model="form.price" type="number" height="30"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<u-form-item label="姓名" class="uform" label-width='100' prop="liaisonMan">
					<u-input placeholder="姓名" v-model="form.liaisonMan" type="string" height="30"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<u-form-item label="联系方式" class="uform" label-width='150' prop="contactNumber ">
					<view class="phonenumber1">
						<u-input placeholder="请输入联系电话" v-model="form.contactNumber " type="number" height="30"
							placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx;width:200rpx" />
					</view>
					<u-icon class="phonenumber2" name="../../../static/icon/sends/phonenumber.svg" size="150"
						label-pos="bottom" label-size="20" style="margin-left: 60rpx;"></u-icon>
				</u-form-item>
				<u-form-item label="生产地区" class="uform" label-width='150' prop="address">
					<u-input placeholder="生产地区" v-model="form.address" type="select" @click="show_addresspicker()"
						placeholder-style="font-size:20rpx" />
					<!-- <u-input v-model="form.address" type="text" @click="show_addresspicker()" /> -->
					<!-- <rselector></rselector> -->
				</u-form-item>
				<u-form-item label="详细地址" label-width='150' class="uform" prop="detail_address">
					<u-input placeholder="请填写详细地址" v-model="form.detail_address" type="text" height="30"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<u-form-item label="备注" label-width='100' label-position="left" prop="remarks">
					<u-input placeholder="其他说明" v-model="form.remarks" type="string" auto-height
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
			</u-form>
		</view>
		<view class="itemtwo">
			<u-form class="itemwidth" :model="form">
				<u-form-item label="预售" class="uform">
					<u-switch slot="right" active-color="rgba(255, 87, 51, 1)" v-model="switchVal" activeValue=0
						inactiveValue=1 @change="setvalue">
					</u-switch>
				</u-form-item>
				<u-form-item label="交货日期" label-width="200" class="uform" v-if="sec==0">
					<u-input placeholder="请选择日期" v-model="form.goodsNewTime" type="string" @click="show_timepicker()"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" disabled />

				</u-form-item>
				<view v-if="sec==1">
				</view>
				<view>
					<u-upload ref="uUpload" max-count="6" :auto-upload="false" :action="action" :form="form.file"
					@on-choose-complete="addimage">
					</u-upload>
				</view>
			</u-form>
		</view>
		<u-picker v-model="showaddresspicker" mode="region" @confirm="thisaddress"></u-picker>
		<u-picker v-model="showtimepicker" mode="time" @confirm="thistime"></u-picker>
		<button class="send_button" :ripple="true" :hair-line="false" @click="submit()">{{buttontext}}</button>
		<view class="screenheight"></view>
	</view>
</template>

<script>
	// import rselector from '../../components/selectot/region_selector.vue'
	export default {
		// components: {
		// 	rselector
		// },
		data() {
			return {
				showaddresspicker: false, //地区选择器
				showtimepicker: false, //时间选择器
				switchVal: false, //预售
				sec: 1, //状态
				goodsuuid: '',
				filelist: [],
				imagelist: [], //图片列表
				form: {
					varieties: '', // 品名
					type: '', // 种类
					kilogram: '', //重量
					price: '', //单价
					liaisonMan: '', //联系人
					contactNumber: '', //电话
					address: '贵州省黔南布依族苗族自治州长顺县', //生产地区
					detail_address: '', //详细地址
					remarks: '', // 备注
					status: 0, // 商品状态
					goodsNewTime: '', //预售时间
					// mainfile: [],//图片
					fileList: []//
				},
				buttontext: '发布',
				rules: { //验证规则
					varieties: [{
						required: true,
						message: '请填写商品名称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur']
					}, {
						max: 15,
						message: '最多15个字符',
						trigger: ['change', 'blur']
					}, {
						pattern: /^[a-zA-Z0-9_/.\u4e00-\u9fa5]+$/,
						message: '错误的字符',
						trigger: ['blur']
					}],
					type: [{
						max: 15,
						message: '最多15个字符',
						trigger: ['change', 'blur']
					}, {
						pattern: /^[a-zA-Z0-9_/.\u4e00-\u9fa5]+$/,
						message: '错误的字符',
						trigger: ['blur']
					}],
					kilogram: [{
						required: true,
						message: '请填写重量',
						trigger: ['change', 'blur']
					}, {
						pattern: /^[0-9_/.]+$/,
						message: '重量不能为字符',
						trigger: ['change', 'blur']
					}],
					price: [{
						required: true,
						message: '请填写单价',
						trigger: ['change', 'blur'],
					}, {
						pattern: /^[0-9_/.]+$/,
						message: '价格不能为字符',
						trigger: ['change', 'blur']
					}],
					liaisonMan: [{
						required: true,
						message: '请填写姓名',
						trigger: ['change', 'blur']
					}, {
						pattern: /^[\u4e00-\u9fa5]+$/,
						message: '请输入正确的名字',
						trigger: ['change', 'blur']
					}, {
						min: 2,
						message: '请输入正确的名字',
						trigger: ['change', 'blur']
					}],
					contactNumber: [{
						required: true,
						message: '请填写联系方式',
						trigger: ['change', 'blur'],
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: "手机号格式不正确",
						trigger: ['blur']
					}],
					detail_address: [{
						required: true,
						message: '请填写详细地址',
						trigger: ['change', 'blur']
					}, {
						pattern: /^[a-zA-Z0-9_/.\u4e00-\u9fa5]+$/,
						message: '错误的字符',
						trigger: ['blur']
					}],
					remarks: [{
						max: 50,
						message: '最多填写50个字符',
						trigger: ['change', 'blur']
					}, {
						pattern: /^[a-zA-Z0-9_/.\u4e00-\u9fa5,\.，。]+$/,
						message: '错误的字符',
						trigger: ['blur']
					}]
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				}


			}
		},
		methods: {
			addimage(imagelist){
				this.imagelist=imagelist
				// console.log(this.imagelist);
			},
			urlstr(str){
				let url = '';
				for(let i = 0;i<str.length;i++){
					console.log(i)
					url = url+i
				}
				return url
			},
			upimage(){
				let mainimage = [];
				for(let i=0;i<this.imagelist.length;i++){
					this.$upLoadfile({
						url: '/upload/imgUpload',
						filePath: this.imagelist[i].url,
						name: 'files'
					}).then(res => {
						if (res.statusCode === 200) {
							let imgurl = JSON.parse(res.data)
							this.form.fileList[i] = imgurl.data[0];
						}
					})
				}
				console.log(mainimage);
				return mainimage;
			},
			submit() {
				if (this.sec == 0 && this.form.goodsNewTime == '') { //开启预售但预售时间为空时
					// console.log('预售时间为空');
					uni.showToast({
						title: "预售时间不能为空",
						icon: 'error'
					});
					return 0;
				} else if (this.sec == 0) {
					this.form.status = 1;
				} else {
					this.form.status = 0;
				};
				if(this.imagelist.length==0){
					uni.showToast({
						title: "至少上传一张图片！",
						icon: 'error'
					});
					return 0 ;
				}
				let productionArea = this.form.address + this.form.detail_address;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let list = this.upimage();
						let data = {
							'goodsUUId': this.goodsuuid,//
							'contactNumber': this.form.contactNumber, //电话号码
							'varieties': this.form.varieties, //品名
							'type': this.form.type, //种类
							'remarks': this.form.remarks, //备注
							'price': this.form.price, //单价
							'kilogram': this.form.kilogram, //重量
							'productionArea': productionArea, //生产地址
							'liaisonMan': this.form.liaisonMan, //联系人
							'status': this.form.status, //状态
							'goodsNewTime': this.form.goodsNewTime, //上架时间
							// 'file': list, //图片
							'fileList': this.form.fileList
						}
						uni.showToast({
							title: '加载中',
							icon: 'loading',
							duration:1000
						});
						setTimeout(() => {
							let url = this.goodsuuid == ''?'/goods/addGoods':'/goods/updateGoods';
							this.$myRequest({
								url: url,
								json:'json',
								// contentType:"application/json;charset=UTF-8;",
								method: 'POST',
								data:data,
							}).then((res) => {
								if (res.statusCode == 200) {
									console.log('数据提交成功');
									this.goto('../operatesuccess/operatesuccess');
								}
							})
						}, 2000)
					} else {
						console.log('验证失败');
					}
				});

				// this.$refs.uUpload.upload();// 上传图片、
			},
			//页面跳转
			goto(url) {
				let turl = url + '?delta=3&' + 'successtext=商品发布成功';
				console.log(turl);
				uni.navigateTo({
					url: turl,
					animationType: 'slide-in-right',
					animationDuration: 1000

				})
			},
			thisaddress(e) {
				// console.log(e);
				this.form.address = e.province.label + e.city.label + e.area.label;
				// console.log(this.form.address);
			},
			thistime(t) {
				// console.log(t);
				this.form.goodsNewTime = t.year + '-' + t.month + '-' + t.day;
				// console.log(this.form.delivery_time);
			},
			show_addresspicker() {
				this.showaddresspicker = true
			},
			show_timepicker() {
				// console.log(11111);
				this.showtimepicker = true;
			},
			setvalue(i) {
				this.sec = i;
				this.form.delivery_time = '';
				// console.log(this.sec);
			},
		},
		onLoad(option) {
			let userinfo = getApp().globalData.userinfo;
			this.form.liaisonMan = userinfo.userRealName;
			this.form.contactNumber = userinfo.userTel;
			// console.log(userinfo);
			let str = userinfo.userDetailedAddress;
			let ig = this.form.address;
			// console.log(ig);
			let re = new RegExp(ig, "ig"); //生成正则表达式
			// 利用正则表达式过滤出详细地址
			this.form.detail_address = str.replace(re, "");
			console.log(option.goodsUuid);
			if(option.goodsUuid){
				// console.log('修改')
				this.buttontext = '修改',
				this.goodsuuid = option.goodsUuid;
				this.form.varieties = option.goodsVarieties
				this.form.type = option.goodsType
				this.form.kilogram = option.goodsKilogram
				this.form.price = option.goodsPrice
				this.form.status =  option.goodsStatus
				if(option.goodsStatus==1){
					this.form.goodsNewTime =  option.goodsNewTime	
				}
			}else{
				// console.log('发布');
			}
			if(this.form.status == 0){
				this.switchVal=false;this.sec=1
			}else{
				this.switchVal=true;this.sec=0
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>
<style>
	@import url("sends_goods.css");
</style>
